<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
    <title>管理后台</title>
</head>

<body>
<div id="content" layout:fragment="content">
<script type="text/javascript" src="../../admin/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="../../admin/ace/js/fuelux/fuelux.spinner.min.js"></script>
<script type="text/javascript" src="../../admin/ace/js/ace-elements.min.js"></script>
    <script type="text/javascript">
    function paging(page){
	    $("[name=page]").val(page);
	    $("#searchForm").submit();
	}
    	$(function(){
    		$('#id-input-file-1').ace_file_input({
                no_file: '没有文件 ...',
                btn_choose: 'Choose',
                btn_change: 'Change',
                droppable: false,
                onchange: null,
                thumbnail: false//| true | large
            });
    		 var options = {
                     currentPage: $("[name=page]").val(),
                     totalPages: $("[name=totalPage]").val(),
                     alignment:"left",
                     itemTexts: function (type, page, current) {
                         switch (type) {
                             case "first":
                                 return "首页";
                             case "prev":
                                 return "上一页";
                             case "next":
                                 return "下一页";
                             case "last":
                                 return "末页";
                             case "page":
                                 return page;
                         }
                     },
                     pageUrl: function(type,page,current){
                         return "javascript:paging('"+page+"');";
                     }
                 }
             $('#example').bootstrapPaginator(options);
             
    		$(".btn-inverse").click(function(e){
                $("[name=page]").attr("value","1");
            })
    		$("#addVideo").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                    name : {
                        required: true,
                    },
    				videoUrl : {
                        required: true,
                    },
                    file : {
                        required: true,
                    }
                },
                messages : {
                    name : {
                        required : "必须填写"
                    },
               		 videoUrl : {
                        required : "必须填写"
                    },
               		 file : {
                        required : "必须填写"
                    }
                },
                submitHandler : function(form) {
                    $("#addVideo").ajaxSubmit(function(date,res,me){
                        if(date){
                            alert("保存成功了！");
                            window.location.href = "/video/list.htm";
                        }else{
                        	alert("添加失败！");
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
    		//更多视频
    		$("#udpateMoreModel").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                submitHandler : function(form) {
                    $("#udpateMoreModel").ajaxSubmit(function(date,res,me){
                        if(date){
                            alert("保存成功了！");
                            window.location.href = "/video/list.htm";
                        }else{
                        	alert("添加失败！");
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
    		
    		//编辑
    		$('.editVideo').click(function(e){
                e.preventDefault();
              //  $("#edit-receivableTime").val($("#invoice-receivableTime-"+e.currentTarget.id).val());
                $("#introduction").val($("#introduction-"+e.currentTarget.id).val());
                $("#name").val($("#name-"+e.currentTarget.id).val());
                $("#videoUrl").val($("#videoUrl-"+e.currentTarget.id).val());
                var imgFile = $("#imgUrl-"+e.currentTarget.id).val();
                $('#id-input-file-2').ace_file_input({
                    no_file: imgFile,
                    btn_choose: 'Choose',
                    btn_change: 'Change',
                    droppable: false,
                    onchange: null,
                    thumbnail: false//| true | large
//                whitelist:'xls|xlsx'
                    //blacklist:'exe|php'
                    //onchange:''
                });
                
                $("#edit-id").val(e.currentTarget.id);
                $('#editModel').modal('show');
            });
    		//更多视频维护
    		$('.editMore').click(function(){
    			//alert(1);
    			$('#editMoreModel').show('model');
    		});
    		$('.more_close').click(function(){
    			$('#editMoreModel').hide('model');
    			// $(".close").click();
    		});
    		//删除
    		$(".btn-danger").click(function(e){
                if(confirm("确定删除吗?")){
                	$.post("/video/deleteById.json",
                			{id : e.currentTarget.id},
                			function(data){
                				if(data.suc)
                                {
                                    $(".close").click();
                                    alert("删除成功！");
                                }else{
                                   alert("删除有误！");
                                }
                            	window.location.href = "/video/list.htm";
                			},"JSON");
                }
            });
    		$('#updateVideo').validate({
    			 checkStart : true,
                 errorElement: 'span',
                 errorClass: 'help-inline',
                 focusInvalid: false,
                 rules : {
                     name : {
                         required: true,
                     },
     				videoUrl : {
                         required: true,
                     }
                 },
                 messages : {
                     name : {
                         required : "必须填写"
                     },
                		 videoUrl : {
                         required : "必须填写"
                     }
                 },
                 submitHandler : function(form) {

                     $("#updateVideo").ajaxSubmit(function(date,res,me){
                         if(date){
                             alert("修改成功了！");
                             $(".close").click();
                             window.location.href = "/video/list.htm";
                         }else{
                         	alert("修改失败了！");
                         }
                     });
                 }
    		});
    	});
    </script>
    <div class="box-content">
        <div class="row-fluid sortable">
            <div class="box span12">
                <h3 class="row-fluid header smaller lighter blue">
                   <span class="label label-large label-pink arrowed-right">视频管理</span>
                </h3>   
                <h3 class="row-fluid header smaller lighter blue">
                	<a href="#" class="btn btn-small btn-success btn-setting" data-toggle="modal" data-target="#myModal"><i class="icon-user"></i>添加视频</a>
                </h3>
                
                <form action="" method="post" id="searchForm">
			        <input type="hidden"  id="page" name="page" th:value="${page.page}" />
		            <input type="hidden"  name="totalPage" th:value="${page.totalPage}" />
		            
		            <span class="topword">视频名称：</span>
		                <input type="text" class="input-xlarge focused" name="name"  th:value="${video.name}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		            <input type="submit" class="btn btn-info btn-inverse tpbtn" value="搜索"/>				
                 </form>
                 
                 <div class="box-content">
                 <span class="label label-large">更多视频地址维护</span>
                 <br/>
                 	<table class="table table-striped table-bordered bootstrap-datatable datatable">
                 		<thead>
                        <tr >
                            <th style="text-align: center;">地址</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                         <tbody>
	                 		<tr>
	                 			<td id="more" th:text="${videoMore.videoMore}"></td>
	                 			<td style="text-align: center;" >
	                 			<a class="btn btn-info btn-small editMore"  style="width: 26px;">编辑 
	                            </a>
	                 			</td>
	                 		</tr>
                 		</tbody>
                 	</table>
                 </div>
                 <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr >
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">视频标题</th>
                            <th style="text-align: center;">视频图片</th>
                            <th style="text-align: center;">视频地址</th>
                            <th style="text-align: center;">视频描述</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="video:${page.result}">
                            <td  style="text-align: center;" th:text="${video.id}"></td>
                            <td  style="text-align: center;" th:text="${video.name}"></td>
                            <td  style="text-align: center;">
                            	<img th:src="${video.imgUrl}" style="height: 120px" />
                            </td>
                            <td  style="text-align: center;" th:text="${video.videoUrl}"></td>
                            <td  style="text-align: center;" th:text="${video.introduction}"></td>
                            <td style="text-align: center;" >
                                <a class="btn btn-small btn-danger" th:id="${video.id}"  style="width: 26px;">
                                                                                                             删除 
                                </a>
                                 <a class="btn btn-info btn-small editVideo" th:id="${video.id}"  style="width: 26px;">
                                                                                                           编辑 
                                </a>
                              <input type="hidden" th:id="'imgUrl-'+${video.id}" th:value="${video.imgUrl}"/>
                              <input type="hidden" th:id="'videoUrl-'+${video.id}" th:value="${video.videoUrl}"/>
                              <input type="hidden" th:id="'name-'+${video.id}" th:value="${video.name}"/>
                              <input type="hidden" th:id="'introduction-'+${video.id}" th:value="${video.introduction}"/>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    
                     <div style="margin-bottom: 0px; margin-left: auto;margin-right: auto">
                        <div id="example" style="margin-bottom:0px"></div>
                     </div>
                </div>
           	</div>
        </div>
     </div>
      <div id="myModal" class="modal hide fade in">
        <div class="modal-header">
            <button class="close"  data-dismiss="modal" type="button">×</button>
            <h3>添加视频</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" enctype="multipart/form-data" action="/video/addOrUpdateVideo.htm" method="post" id="addVideo">
            <fieldset>
                <div class="modal-body">
                	<div class="control-group">
                        <label class="control-label">视频标题：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">视频描述：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="introduction" />
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">视频链接：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="videoUrl" />
                        </div>
                    </div>
                    
                    <div class="control-group">
                      <label class="control-label">上传图片：</label>
                      <div class="controls">
                         <input id="id-input-file-1"  type="file"  name="file" />
                      </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
    <div id="editModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>编辑视频</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" enctype="multipart/form-data" action="/video/addOrUpdateVideo.json" method="post" id="updateVideo">
             <input id="edit-id" name="id" type="hidden"/>
                <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">视频标题：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="name"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">视频描述：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="introduction" id="introduction"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">视频链接：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="videoUrl" id="videoUrl"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                      <label class="control-label">上传图片：</label>
                      <div class="controls">
                         <input id="id-input-file-2"  type="file"  name="file" />
                      </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    <div id="editMoreModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close more_close" data-dismiss="modal" type="button">×</button>
            <h3>编辑更多视频地址</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" enctype="multipart/form-data" action="/video/updateVideoMore.json" method="post" id="udpateMoreModel">
             <input id="edit-id" name="id" type="hidden"/>
                <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">链接：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="videoMore" id="videoMore"/>
                        </div>
                    </div>
                    </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="保存" />
                    <a href="#" class="btn btn-small more_close">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
</body>
</html>
